<template>
	<view v-if="movieInfo">
		<uni-card style="margin: 0;padding: 0;background-image: linear-gradient(to top, #00aaff 0%, #00007f 100%);">
			<uni-row>
				<uni-col :span="8">
					<image :src="movieInfo.movieImage" mode="widthFix" style="width: 150px;padding: 13px;">
					</image>
				</uni-col>
				<uni-col :span="16" style="color: white;padding: 35px;font-size: 20px;">
					<view><text style="font-size: 30px;font-weight: bold;">{{movieInfo.movieName}}</text></view>
					<view style="padding: 50px 0 0 0;"><text>{{movieInfo.movieDuration}}分钟</text></view>
					<view style="padding: 10px 0 0 0;"><text>{{movieInfo.movieShowTime}}上映</text></view>
				</uni-col>
				<uni-col :span="24" style="color: white;">
					<p style="font-size: 30px;font-weight: bold;padding: 10px;">剧情描述</p>
					<p style="padding: 10px;">{{movieInfo.movieDescription}}</p>
				</uni-col>
			</uni-row>
		</uni-card>
		<uni-card style="margin: 0;padding: 0;">
			<uni-row>
				<uni-col :span="24">
					<p style="font-size: 30px;font-weight: bold;padding: 10px;">演职人员</p>
					<p style="font-size: 20px;padding: 10px;">
						<span>导演:&nbsp&nbsp</span>
						<span v-for="(item,index) in movieInfo.movieDirector">
							{{item}}
							<span v-if="index+1 !=movieInfo.movieDirector.length">/</span>
						</span>
					</p>
					<p style="font-size: 20px;padding: 10px;">
						<span>演员:&nbsp&nbsp</span>
						<span v-for="(item,index) in movieInfo.movieActor">
							{{item}}
							<span v-if="index+1 !=movieInfo.movieActor.length">/</span>
						</span>
					</p>
				</uni-col>
				<uni-col :span="12">
					<p style="font-size: 30px;font-weight: bold;padding: 10px;">用户评论</p>
				</uni-col>
				<uni-col :offset="7" :span="5" style="text-align: right;padding: 10px">
					<button style="background-color: #ff557f;color: white;" @click="toComment">我要评论</button>
				</uni-col>
			</uni-row>
			<uni-card v-for="(item,index) in commentList" :key="index" style="padding: 5px;">
				<uni-row>
					<uni-col :span="24" style="padding: 10px;">
						<uni-row>
							<uni-col :span="2">
								<image :src="item.user.avatar" mode="scaleToFill"
									style="height: 70px;width: 70px;border-radius: 70px;"></image>
							</uni-col>
							<uni-col :span="22">
								<p style="padding: 30px;font-size: 20px;">{{item.user.username}}</p>
							</uni-col>
						</uni-row>
					</uni-col>
					<uni-col :span="24" style="padding-left: 10px;font-size: 25px;">{{item.comment.content}}</uni-col>
					<uni-col :span="12">
						<p style="padding: 10px 0 0 10px">{{item.comment.createAt}}</p>
					</uni-col>
					<uni-col :span="12" style="text-align: right;">
						<p>
							<uni-icons type="hand-up" size="30"></uni-icons>
							<span v-if="item.comment.likeCount==0" style="vertical-align: 3px;">赞</span>
							<span v-else style="vertical-align: 3px;">{{item.comment.likeCount}}</span>
						</p>
					</uni-col>
				</uni-row>
			</uni-card>
		</uni-card>
		<uni-fab horizontal="right" @fabClick="toMovieBuyList"></uni-fab>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import api from '../../../api/api'

	const props = defineProps()
	const movieId = ref()
	const movieInfo = ref()
	const commentList = ref()

	onMounted(() => {
		movieId.value = props.movieId
		getMovie()
		getComment()
	})

	const getMovie = () => {
		api.movie.getMovieById({
			movieId: props.movieId
		}).then(res => {
			if (res.data.code == 0) {
				movieInfo.value = res.data.data.movie
				movieInfo.value.movieActor = eval('(' + movieInfo.value.movieActor + ')')
				movieInfo.value.movieDirector = eval('(' + movieInfo.value.movieDirector + ')')
			}
		})
	}
	const getComment = () => {
		api.comment.getCommentByMovieId({
			movieId: movieId.value
		}).then(res => {
			if (res.data.code == 0) {
				commentList.value = res.data.data.list
			}
		})
	}
	const toComment = () => {
		uni.navigateTo({
			url: '/pages/film/films/filmComment?movieId=' + movieId.value
		})
	}
	const toMovieBuyList = ()=>{
		uni.navigateTo({
			url:'/pages/film/films/filmBuyList'
		})
	}
</script>

<style scoped>
	.color {
		background-color: antiquewhite;
		color: honeydew;
	}
</style>
